<template>
  <div class="flex-grow of-hidden">
    <div class="flex-middle-center flex-grow font-xl mb-1">
      <b :class="{'text-red': m.hostHot}"><small>{{m.hostRank}}</small>{{m.hostShort}}</b>
      <small class="text-grey mx-4">VS</small>
      <b :class="{'text-red': m.guestHot}">{{m.guestShort}}<small>{{m.guestRank}}</small></b>
    </div>

    <div class="text-center text-truncate choosable spacing py-2 b-l" :class="{on: value && value.length}" @click="$emit('choose', m)">{{content}}</div>
  </div>
</template>

<script>
import { mixin } from './calculator'

export default {
  name: 'layout-bf',
  mixins: [mixin],
  computed: {
    content () {
      if (this.value && this.value.length) {
        return this.value.map(b => {
          var split = b.split('|')
          return split[1]
        }).join(' ')
      }
      return '打开投注面板'
    }
  }
}
</script>
